<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script>
        $(function () {
           $("#name").blur(function () {
               var ctxPath = '[[@{/}]]';       //上下文路径
               var url = ctxPath+"/emp/name/" + this.value;
               $.get(url,null,function (response) {
                    //alert(JSON.stringify(response))
                   if(response.count>0){
                       $("#checkResult").css("color","yellow").html("用户名不可用");
                   }else {
                       $("#checkResult").css("color","purple").html("用户名可用");
                   }
               });
           });
        });
    </script>
</head>
<body>

<form th:action="@{/emp}" th:object="${emp}" method="post">
    <h1 th:if="${emp.id == null}">新增员工</h1>
    <div th:if="${emp.id != null}">
        <h1>修改员工</h1>
        <input type="hidden" th:field="*{id}">
        <!--表单提交方式转换参数-->
        <input type="hidden" name="_method" value="PUT">
    </div>
    <p>
        姓名:<input type="text" th:field="*{name}">
        <span id="checkResult"></span>
    </p>
    <p>
        年龄:<input type="text" th:field="*{age}">
    </p>
    <p>
        性别:<input type="radio" th:field="*{sex}" value="M">男
        性别:<input type="radio" th:field="*{sex}" value="F">女
    </p>
    <p>
        生日:<input type="text" th:field="*{birthday}">
    </p>
    <p>
        证件类型:
        <select th:field="*{idType}">
            <option value="">--请选择--</option>
            <option value="A">身份证</option>
            <option value="B">学生证</option>
            <option value="C">港澳通行证</option>
            <option value="D">其他</option>
        </select>
    </p>
    <button>保存</button>
</form>
</body>
</html>